<template class="a1">
	<view class="container top">
		<!-- <view class="top-bg">
			<image src="/static/xiao@3x.png" mode="widthFix" class="top-bg-img" />
		</view> -->
		<view>
			<view class="add-section">
				<button class="add-btn" @click="addCoupon">+新增优惠券</button>
			</view>
			
			<view class="tab-section">
				<view :class="['tab-item', activeTab === 'ongoing' ? 'active' : '']" @click="switchTab('ongoing')">
					进行中
				</view>
				<view :class="['tab-item', activeTab === 'ended' ? 'active' : '']" @click="switchTab('ended')">
					已结束
				</view>
			</view>
			
			<view class="coupon-list">
				<template v-if="displayCoupons && displayCoupons.length > 0">
					<view 
						class="coupon-item"
						:class="activeTab === 'ended' ? 'coupon-ended' : 'coupon-ongoing'"
						v-for="(item, index) in displayCoupons" :key="index">
						<view class="coupon-left" :class="activeTab === 'ended' ? 'left-ended' : 'left-ongoing'">
							<text class="amount">{{item.discountAmount}}</text>
							<text class="condition">满{{item.fullAmount}}减</text>
						</view>
						<view class="coupon-right" :class="activeTab === 'ended' ? 'right-ended' : 'right-ongoing'">
							<text class="coupon-name">优惠券名称：{{item.name}}</text>
							<text class="valid-date">有效期：{{item.validStartDate}}-{{item.validEndDate}}</text>
							<text class="limit">每人限领{{item.perLimit}}张</text>
							<view v-if="activeTab === 'ended'" class="ended-mark">已结束</view>
						</view>
					</view>
				</template>
				<view class="empty-tip" v-else>
					暂无{{activeTab === 'ongoing' ? '进行中' : '已结束'}}的优惠券
				</view>
			</view>
		</view>
		
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onShow, onLoad } from '@dcloudio/uni-app';

const activeTab = ref('ongoing');
const coupons = ref([]);

// 根据tab显示不同状态的优惠券
const displayCoupons = computed(() => {
	if (!coupons.value || coupons.value.length === 0) {
		return [];
	}
	const now = new Date().getTime();
	return coupons.value.filter(coupon => {
		const endDate = new Date(coupon.endDate).getTime();
		if (activeTab.value === 'ongoing') {
			return endDate >= now;
		} else {
			return endDate < now;
		}
	});
});

function switchTab(tab) {
	activeTab.value = tab;
}

function addCoupon() {
	uni.navigateTo({
		url: '/pages/coupon/add-coupon'
	});
}

// 加载优惠券数据
function loadCoupons() {
	const storedCoupons = uni.getStorageSync('coupons') || [];
	coupons.value = storedCoupons;
}

// 页面加载时初始化数据
onLoad(() => {
	loadCoupons();
});

// 页面显示时重新加载数据
onShow(() => {
	loadCoupons();
});
</script>

<style>
	.top {
		width: 100%;
		height: 400rpx;
		background-image: url(/static/xiao@3x.png);
		background-repeat: no-repeat;
		background-size: 100%;
	}
.container {
	padding: 20rpx;
	background-color: #fff;
	min-height: 100vh;
	width: 100%;
}

.header {
	padding: 20rpx -200rpx;
	text-align: center;
}

.title {
	font-size: 32rpx;
	font-weight: bold;
}

.add-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0 10rpx 0;
}

.section-title {
	color: #fff;
	font-size: 28rpx;
}

.add-btn {
	background-color: #ffffff;
	color: #fff;
	font-size: 28rpx;
	width: 700rpx;
	padding: 10rpx 30rpx;
	border: none;
	border-radius: 44rpx;
	color: #166bf1;
	box-shadow: 0 2rpx 8rpx rgba(255,140,0,0.08);
}

.tab-section {
	display: flex;
	margin-bottom: 30rpx;
	background: #f7f7f7;
	border-radius: 16rpx;
	padding: 6rpx;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 20rpx 0;
	font-size: 28rpx;
	color: #666;
	position: relative;
	border-radius: 12rpx;
	background-color: #e0e0e0;
	transition: background 0.2s, color 0.2s;
}

.tab-item.active {
	color: #fff;
	background: #007AFF;
	font-weight: bold;
}

.tab-item.active::after {
	display: none;
}

.coupon-list {
	padding: 20rpx 0;
}

.coupon-item {
	display: flex;
	margin-bottom: 30rpx;
	border-radius: 16rpx;
	box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
	overflow: hidden;
	border: 1rpx solid #f0f0f0;
	background-color: #fff;
	color: #333;
}

.coupon-ongoing {
	background-color: #fff;
}

.coupon-ended {
	background-color: #f5f5f5;
	color: #bbb;
	border: 1rpx solid #e0e0e0;
}

.coupon-left {
	width: 200rpx;
	padding: 40rpx 20rpx;
	text-align: center;
	border-right: 2rpx dashed #eee;
	z-index: 99;
}

.left-ongoing {
	background: linear-gradient(135deg, #ffb347 0%, #ff8800 100%);
	color: #fff;
}

.left-ended {
	background: #e0e0e0;
	color: #bbb;
}

.coupon-right {
	flex: 1;
	padding: 20rpx;
	z-index: 11;
}

.right-ongoing {
	background: #fff;
	color: #333;
}

.right-ended {
	background: #f5f5f5;
	color: #bbb;
	position: relative;
}

.ended-mark {
	position: absolute;
	right: 24rpx;
	bottom: 24rpx;
	color: #bbb;
	font-size: 32rpx;
	font-weight: bold;
	transform: rotate(-15deg);
	border: 2rpx solid #bbb;
	border-radius: 8rpx;
	padding: 2rpx 18rpx;
	background: #f5f5f5;
	opacity: 0.8;
}

.amount {
	font-size: 60rpx;
	font-weight: bold;
	display: block;
}

.condition {
	font-size: 24rpx;
	margin-top: 10rpx;
}

.coupon-name {
	font-size: 28rpx;
	color: #333;
	margin-bottom: 10rpx;
	display: block;
	font-weight: bold;
	z-index: 11;
}

.valid-date, .limit {
	font-size: 24rpx;
	color: #999;
	display: block;
	margin-top: 10rpx;
}

.empty-tip {
	text-align: center;
	color: #989898;
	font-size: 28rpx;
	padding: 40rpx 0;
}

.top-bg {
	width: 100%;
	height: 220rpx;
	position: relative;
	background: none;
}
.top-bg-img {
	width: 100%;
	height: 220rpx;
	display: block;
}
</style> 